<template>
  <el-col :span="24">
    <el-col :span="24" class="bg-light" style="height: 60px">
      <el-menu :default-active="activeIndex" class="el-menu-demo w-100 d-flex justify-content-center" mode="horizontal" @select="selectHandle">
        <el-menu-item index="1" >开始练习</el-menu-item>
        <el-menu-item index="2">练习记录</el-menu-item>
        <el-menu-item index="3">错题本</el-menu-item>
        <el-menu-item index="4">其他</el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="24">
      <router-view></router-view>
    </el-col>
  </el-col>

</template>

<script>
export default {
  name: 'wordPractice',
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods:{
    selectHandle(index,path){
      // console.log(12312)
      switch (index){
        case '1':
          this.$router.push('/wordPractice/index')
          break
        case '2':
          this.$router.push('/wordPractice/record')
          break
      }
    }
  }
}
</script>

<style scoped>

</style>
